<template>
  <div class="artist-detail">
    <div class="screen">
      <div class="category">
        <div class="category-title">语种:</div>
        <select-category
          class="category-list"
          :categories="areas"
          mode="horizontal"
          @change="getAreasId"
        ></select-category>
      </div>
      <div class="category">
        <div class="category-title">分类:</div>
        <select-category
          class="category-list"
          :categories="types"
          mode="horizontal"
          @change="getTypesId"
        ></select-category>
      </div>
      <div class="category">
        <div class="category-title">筛选:</div>
        <select-category
          class="category-list"
          :categories="Fnames"
          mode="horizontal"
          @change="getNameId"
        ></select-category>
      </div>
    </div>
    <div class="display-artists">
      <artist-list :artists="artists"></artist-list>
    </div>
  </div>
</template>

<script>
import selectCategory from "components/common/select-category/select-category";
import artistList from "components/content/artist-list/artist-list";
import { areas, types, Fnames } from "./data.js";
import { _getArists } from "network/discover";
export default {
  name: "mv",
  components: {
    selectCategory,
    artistList,
  },
  data() {
    return {
      areas,
      types,
      Fnames,
      artists: [],
      queryParams: {
        area: -1,
        type: -1,
        name: -1,
        limit: 30,
        offset: 1,
      },
    };
  },
  mounted() {
    this.getArists();
  },
  methods: {
    getArists() {
      _getArists(this.queryParams).then((res) => {
        if (res.status === 200 && res.data.code === 200) {
          this.artists = res.data.artists;
          console.log(this.artists);
        }
      });
    },
    getAreasId(id) {
      this.queryParams.area = id;
      this.getArists();
    },
    getTypesId(id) {
      this.queryParams.type = id;
      this.getArists();
    },
    getNameId(id) {
      this.queryParams.name = id;
      this.getArists();
    },
  },
};
</script>
<style lang="less" scoped>
.artist-detail {
  padding: 2% 10% 0 10%;
  height: 100%;
  width: 100%;
  // min-width: 120rem;
}
.category {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
  font-size: 16px;
  height: 26px;
  line-height: 26px;
  width: 100%;
  &-title {
    width: auto;
  }
  &-list{
    width: 95%;
  }
}
.display-artists {
  padding-top: 20px;
}
</style>